import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
import 'package:flutter_my_web/widget/TextWidget.dart';


//分开两层绘制
class SketchPad_3 extends StatefulWidget {
  const SketchPad_3({Key? key}) : super(key: key);

  @override
  State<SketchPad_3> createState() => _SketchPad_3State();
}

class _SketchPad_3State extends State<SketchPad_3> {
   var lastPath=ValueNotifier(Path());
   var curPath=ValueNotifier(Path());
   var points=ValueNotifier(0);

   @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onPanDown: (details) {
          points.value++;
          curPath.value.moveTo(details.localPosition.dx, details.localPosition.dy);
          curPath.value.lineTo(details.localPosition.dx+1, details.localPosition.dy+1);
          curPath.notifyListeners();
          points.notifyListeners();
        },
        onPanUpdate: (details) {
          curPath.value.lineTo(details.localPosition.dx, details.localPosition.dy);
          curPath.notifyListeners();
        },
        onPanEnd: (_) {
          lastPath.value.addPath(curPath.value, Offset.zero);
          curPath.value = Path();
          curPath.notifyListeners();
          for(int i = 0; i< 100; i+=20){
            Future.delayed(Duration(microseconds: 1),(){
              lastPath.notifyListeners();
            });
          }
        },
        child: Stack(
          children: [
            Container(
              height: double.infinity,
              width: double.infinity,
              color: Colors.yellow[100],
              child: ValueListenableBuilder<int>(
                valueListenable: points,
                builder: (_, p, c) {
                  return SimpleText("${p}");
                }
              ),
            ),
            RepaintBoundary(
              child: ValueListenableBuilder<Path>(
                  valueListenable: lastPath,
                  builder: (_,path,child) {
                    return CustomPaint(
                      painter: _SketchPainter(lastPath.value),
                      size: Size.infinite,
                      isComplex: true,
                      willChange: false,
                    );
                  }
              ),
            ),
            RepaintBoundary(
              child: ValueListenableBuilder(
                  valueListenable: curPath,
                  builder: (_,path,child) {
                    return CustomPaint(
                      willChange: true,
                      painter: _SketchPainter(curPath.value),
                      size: Size.infinite,
                    );
                  }
              ),
            ),
          ],
        ));
  }
}

class _SketchPainter extends CustomPainter {
  Path? paths;
  _SketchPainter(this.paths);

  static final pen = Paint()
    ..color = Colors.black
    ..style = PaintingStyle.stroke
    ..strokeWidth = 2.0;

  @override
  void paint(Canvas canvas, Size size) {
    if(paths!=null){
      canvas.drawPath(paths!, pen);
    }else{
      print("paths == null");
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}
